<template>
  <!-- 我的收藏 -->
  <div class="purse-body">
    <div class="details">
      <div class="details-title">
        个人中心/<span style="color: #3894f8">我的发票</span>
      </div>
      <!-- 筛选 -->
      <div class="select-top">
        <p
          v-for="(item, index) in selectArr"
          :key="index"
          :class="select == item.id ? 'select-p' : ''"
          @click="handelSelect(item.id)"
        >
          {{ item.name }}
        </p>
      </div>
      <!-- 开票金额 -->
      <div class="amount" v-if="select == '1'">
        <p>可开发票金额：<span style="color: #f26161">￥600</span></p>
        <p>历史已开据金额：￥600</p>
        <p>暂不可开据金额：￥600</p>
      </div>
      <!-- 单选 可开 暂不可开 ... -->
      <div class="single-choice" v-if="select == '1'">
        <el-radio v-model="radio" label="1">可开票</el-radio>
        <el-radio v-model="radio" label="2">暂不可开票</el-radio>
      </div>
      <div class="single-choice" v-if="select == '2'">
        <el-radio v-model="radio" label="1">全部</el-radio>
        <el-radio v-model="radio" label="2">成功</el-radio>
        <el-radio v-model="radio" label="2">失败</el-radio>
        <el-radio v-model="radio" label="2">正在审核</el-radio>
      </div>
      <!-- 搜索 -->
      <div class="search-ipt" v-if="select == '1'">
        时间：
        <div class="picker">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>
        开票主体：
        <div class="select">
          <el-select v-model="value" placeholder="请选择开票主体">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        订单编号：
        <div class="select">
          <el-input v-model="input" placeholder="请输入订单编号"></el-input>
        </div>
        <p class="ser-btn">搜 索</p>
        <p class="heavy-btn">重 置</p>
      </div>
      <div class="search-ipt" v-if="select == '2'">
        申请时间：
        <div class="picker">
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </div>

        订单编号：
        <div class="select">
          <el-input v-model="input" placeholder="请输入订单编号"></el-input>
        </div>
        发票号：
        <div class="select">
          <el-input v-model="input" placeholder="请输入发票号"></el-input>
        </div>
        <p class="ser-btn">搜 索</p>
        <p class="heavy-btn">重 置</p>
      </div>
      <!-- 批量选择 -->
      <div class="batchSelect" v-if="select == '1'">
        <p>
          已选择x个订单，共代开金额：<span style="color: #f36d6d">￥100</span>
        </p>
        <p class="btn-p" @click="handelClick">批量开据发票</p>
      </div>
    </div>
    <div class="body-box">
      <!-- 表格 -->
      <div class="tabulation">
        <tableInvoice
          v-if="select == '1'"
          :tableData="tableData"
        ></tableInvoice>
        <tableIntwe v-if="select == '2'" :tableData="tableData1"></tableIntwe>
        <ModuleThree v-if="select == '3'"></ModuleThree>
      </div>
    </div>
    <!-- 分页 -->
    <div class="paging" v-if="select == '1' || select == '2'">
      <div class="paging-body">
        <paging :pagingObj="pagingObj" @pageVal="pageVal"></paging>
      </div>
    </div>
    <ticketDialog
      :dialogVisible="dialogVisible"
      @handleCloseDele="handleCloseDele"
      @handleUnderstand="handleUnderstand"
    ></ticketDialog>
  </div>
</template>

<script>
import tableInvoice from "./components/tableInvoice.vue";
import tableIntwe from "./components/tableIntwe.vue";
import ModuleThree from "./components/ModuleThree.vue";
import ticketDialog from "./components/ticketDialog.vue";
import paging from "../../../../components/paging.vue";
export default {
  data() {
    return {
      pagingObj: {
        currentPage: 1, //当前页
        pageSize: 10, // 一页显示多少个
        totalDevice: 10, //用户总数
      },
      tableData: [
        {
          code: "12345678998774564",
          mainBody: "xxxx有限公司",
          name: "购买道具",
          amount: "100",
          openable: "100",
          time: "2016年05月02日10:20",
        },
      ], // 表格数据
      tableData1: [
        {
          time: "2016年05月02日10:20",
          party: "xxxx有限公司",
          Lookup: "xxxx有限公司",
          amount: "100",
          nature: "电子发票",
          status: "成功",
          remark: "..",
        },
      ], // 表格数据2
      selectArr: [
        { name: "开据发票", id: "1" },
        { name: "开票记录", id: "2" },
        { name: "发票信息管理", id: "3" },
      ],
      select: "1", // 筛选
      radio: "1", // 单选
      value: "", // 搜索
      value1: "", //搜索
      input: "", //搜索
      options: [
        {
          value: "1",
          label: "xxx有限公司",
        },
        {
          value: "2",
          label: "xxx有限公司",
        },
        {
          value: "3",
          label: "xxx有限公司",
        },
        {
          value: "4",
          label: "xxx有限公司",
        },
      ], // 搜索下拉框数据
      dialogVisible: false, // 开票弹窗
    };
  },
  components: {
    paging,
    tableInvoice,
    ticketDialog,
    tableIntwe,
    ModuleThree,
  },
  methods: {
    // 点击批量开票
    handelClick() {
      this.dialogVisible = true;
    },
    //关闭弹窗
    handleCloseDele() {
      this.dialogVisible = !this.dialogVisible;
    },
    // 弹窗确认
    handleUnderstand() {
      this.dialogVisible = !this.dialogVisible;
    },
    pageVal(val) {
      this.pagingObj.currentPage = val;
    },

    // 筛选
    handelSelect(num) {
      this.select = num;
      // this.$emit("handelSelect", num);
    },
  },
};
</script>

<style scoped lang="less">
.purse-body {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  // 最上层div放 搜索框..
  .details {
    width: 93%;
    display: flex;
    flex-direction: column;
    // margin: auto;
    margin: 0 auto;
    div {
      width: 100%;
      height: 35px;
      line-height: 35px;
      display: flex;
      font-size: 14px;
      font-weight: 400;
    }
    .details-title {
      font-size: 17px;
      font-weight: 600;
      margin-top: 10px;
    }
    .select-top {
      margin-top: 5px;
      p {
        font-size: 16px;
        margin-left: 40px;
      }
      p:nth-child(1) {
        margin-left: 0px;
      }
      .select-p {
        color: #3894ff;
      }
    }
    // 开票金额
    .amount {
      margin-top: 5px;
      p {
        margin-left: 40px;
      }
      p:nth-child(1) {
        margin-left: 0px;
      }
    }
    // 单选
    .single-choice {
      height: 15px;
      margin-top: 10px;
      /deep/span {
        color: #101010 !important;
        font-size: 15px;
        font-weight: 400;
      }
    }
    // 搜索
    .search-ipt {
      margin-top: 15px;
      font-size: 14px;
      .picker {
        width: 250px;
        margin-right: 10px;
      }
      .select {
        width: 140px;
        margin-right: 10px;
        /deep/.el-input__inner {
          height: 35px !important;
          font-size: 14px;
        }
      }
      .ser-btn {
        width: 60px;
        height: 35px;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        // border: 1px solid #3291f8;
        background-color: #3894ff;
        border-radius: 5px;
      }
      .heavy-btn {
        margin-left: 10px;
        color: #e99d42;
      }
    }
    // 批量选择
    .batchSelect {
      margin-top: 20px;
      display: flex;
      position: relative;
      .btn-p {
        width: 110px;
        height: 30px;
        border-radius: 5px;
        line-height: 30px;
        color: #ffffff;
        text-align: center;
        background-color: #3894ff;
        position: absolute;
        right: 0;
      }
    }
  }
}
.body-box {
  width: 93%;
  // min-height: 500px;
  // max-height: 650px;
  margin: auto;
  margin-top: 10px;
  //表格区
  .tabulation {
    // min-height: 500px;
  }
}
// 底部div放分页
.paging {
  // margin: auto;
  width: 95%;
  margin-top: 10px;
  margin-bottom: 10px;
  height: 30px;
  display: flex;
  .paging-body {
    width: 100%;
    right: 0px;
    height: 30px;
    display: flex;
    justify-content: flex-end;
    // margin: auto;
  }
}
</style>
